<?php
  include("includes/header.php");
?>
<div class="col-xs-10 col-xs-offset-2 content-container">
  <div class="page-header">
    <h3>Portfolio</h3>
  </div>
  <a href="portfolio-add.php" class="btn btn-primary">New</a>
  <br><br>
  <div class="tbl-show"></div>
</div>
<div class="modal-container">
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Konfirmasi</h4>
        </div>
        <div class="modal-body">
          <input type="hidden" class="idDelete">
          Anda yakin hapus data ini?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary tbl-hapus">OK</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</div>
<?php
  include("includes/footer.php");
?>


<script type="text/javascript">
  function load() 
  {
    $.ajax({
      url: 'portfolio-tbl.php'
    })
    .done(function(data) {
      console.log("success");
      $('.tbl-show').html(data);
    })
    .fail(function() {
      console.log("error");
    })
    .always(function() {
      console.log("complete");
    });
  }
  $(document).ready(function() {
    load();
    $('.tbl-show').on('click', '.delete', function(event) {
      event.preventDefault();
      $('#myModal').modal('show');
      $('.idDelete').val($(this).data('id'));
    });
    $('.modal-container').on('click', '.tbl-hapus', function(event) {
      event.preventDefault();
      $.ajax({
        url: 'portfolio-delete.php',
        type: 'POST',
        data: {id: $('.idDelete').val()},
      })
      .done(function() {
        console.log("success");
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
        $('#myModal').modal('hide');
        load();
      });
    });
  });
</script>